<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--企业数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-containers">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" />
                </div>
            </el-col>
            <!--小区数据-->
            <el-col :span="20" :xs="24">
                <el-card class="box-card">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="计划名称" prop="planName">
                            <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="安检员" prop="checkerName">
                            <el-input v-model="queryParams.checkerName" placeholder="请输入安检员" clearable
                                style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="安检状态" prop="checkStatus">
                            <el-select v-model="queryParams.checkStatus" filterable placeholder="请选择安检状态"
                                style="width:150px">
                                <el-option label="暂无" value="0"> </el-option>
                                <el-option label="待安检" value="1"> </el-option>
                                <el-option label="正常" value="2"> </el-option>
                                <el-option label="隐患" value="3"> </el-option>
                                <el-option label="到访不遇" value="4"> </el-option>
                                <el-option label="拒绝安检" value="5"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>

                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
                                v-hasPermi="['system:checkdetail:import']">导入</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                                v-hasPermi="['system:checkdetail:export']">导出</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column type="selection" width="50" align="center" />
                        <el-table-column label="计划名称" align="center" key="planName" prop="planName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="安检状态" align="center" key="checkStatus" prop="checkStatus"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.checkStatus == '0'">暂无</span>
                                <span v-if="scope.row.checkStatus == '1'">待安检</span>
                                <span v-if="scope.row.checkStatus == '2'">正常</span>
                                <span v-if="scope.row.checkStatus == '3'">隐患 </span>
                                <span v-if="scope.row.checkStatus == '4'">到访不遇</span>
                                <span v-if="scope.row.checkStatus == '5'">拒绝安检</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="安检员" align="center" key="checkerName" prop="checkerName"
                            :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="客户名称" align="center" key="customerName" prop="customerName"
                            :show-overflow-tooltip="true" width="100" />
                        <el-table-column prop="customerType" label="客户类型" align="center">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
                            </template>
                        </el-table-column>
                        <el-table-column label="联系电话" align="center" key="telephone" prop="telephone"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="客户地址" align="center" key="customerAddress" prop="customerAddress"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="描述" align="center" key="description" prop="description"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <span v-if="scope.row.handleStatus == 'Y'">已处理</span>
                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                    v-hasPermi="['system:checkdetail:edit']" v-else>处理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
                <!-- 添加或修改安检计划对话框 -->
                <el-dialog :title="title" :visible.sync="checkopen" width="600px" append-to-body>
                    <el-form ref="form" label-width="100px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="安检状态" prop="checkStatus">
                                    <el-select v-model="checkStatus" filterable placeholder="请选择安检状态" style="width: 100%;">
                                        <el-option label="暂无" value="0"> </el-option>
                                        <el-option label="待安检" value="1"> </el-option>
                                        <el-option label="正常" value="2"> </el-option>
                                        <el-option label="隐患" value="3"> </el-option>
                                        <el-option label="到访不遇" value="4"> </el-option>
                                        <el-option label="拒绝安检" value="5"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="描述" prop="description">
                                    <el-input v-model="description" placeholder="请输入描述" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="checksubmitForm">确 定</el-button>
                        <el-button @click="checkcancel">取 消</el-button>
                    </div>
                </el-dialog>
                <!-- 安检记录导入对话框 -->
                <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
                    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip text-center" slot="tip">
                            <!--                    <div class="el-upload__tip" slot="tip">-->
                            <!--                      <el-checkbox v-model="upload.updateSupport" />-->
                            <!--                      是否更新已经存在的安检数据-->
                            <!--                    </div>-->
                            <span>仅允许导入xls、xlsx格式文件。</span>
                            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                                @click="importTemplate">下载安检记录模板</el-link>
                        </div>
                    </el-upload>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitFileForm">确 定</el-button>
                        <el-button @click="upload.open = false">取 消</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { areaList, areaTreeList } from "@/api/fileManagement/areainfo.js"
import { checkdetailList, checkdetailInfo, updateCheckdetail, exportCheckdetail } from "@/api/security/log.js"
import { meterarchivesList } from "@/api/fileManagement/meterarchives.js"
import { listSupplier, } from "@/api/system/supplierInfo.js";
import { addMeterarchives, } from "@/api/fileManagement/meterarchives.js"
import { planSelectList, } from '@/api/service/planlist.js'
import { getToken } from '@/utils/auth'

export default {
    name: "civilArchives",
    components: {},
    dicts: ["customer_type"],
    data() {
        return {
            checkopen: false,
            // 计划状态
            checkStatus: '',
            description: '',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            idName: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 小区表格数据
            userList: null,
            // 弹出层标题
            title: "",
            //表计弹出层标题
            title2: "",
            // 企业树选项
            deptOptions: undefined,
            // 是否显示弹出层
            open: false,
            // 企业名称
            deptName: '',
            //是否表计显示弹出层
            bjOPen: false,
            // 表单参数
            form: {},
            form1: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 安检记录导入参数
            upload: {
                // 是否显示弹出层（安检记录导入）
                open: false,
                // 弹出层标题（安检记录导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的安检记录数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/checkdetail/importData",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
            },
            activeNames: ["1"],
            treeList: [],
            supplierList: [],
            schemeList: [],
            customStaus: false,
            areID: null,
            id: null,
        };
    },
    watch: {
        // 根据名称筛选企业树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
        form: {
            deep: true,
            handler(val) {
                this.form = val
            },
        }
    },
    created() {
        this.getList();
        this.getDeptTree();
        this.getTreeList()
    },
    methods: {
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.areaId = data.id;
            this.getUserInfoList()
        },
        // 处理
        handleUpdate(info) {
            this.id = info.id
            this.checkopen = true

        },
        // 处理确定
        checksubmitForm() {
            updateCheckdetail({ checkStatus: this.checkStatus, id: this.id, description: this.description }).then((res) => {
                this.checkopen = false
                if (res.code == 200) {
                    this.$modal.msgSuccess("处理成功");
                    this.getList();
                } else {
                    this.$modal.msgError(res.msg);
                }
            })

        },
        // 处理取消
        checkcancel() {
            this.checkopen = false
            this.checkStatus = ''
        },
        /** 查询供应商列表 */
        getsupplierList() {
            let params = {
                pageNum: 1,
                pageSize: 9999,

            }
            this.loading = true;
            listSupplier(params).then((response) => {
                this.supplierList = response.rows;

            });
        },
        // 获取新增小区
        getTreeList() {
            let param = {
                id: null
            }
            if (!this.customStaus) {
                param.id = this.areID
            } else {
                param.id = null
            }
            areaList(param).then((response) => {
                this.treeList = response.rows;
            });
        },
        // 树查询
        treeBlur(event) {
            console.log(event)
        },
        /** 查询小区列表 */
        getList() {
            this.loading = true;
            checkdetailList(this.queryParams).then((response) => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 查询企业下拉树结构 */
        getDeptTree() {
            areaTreeList().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            console.log(data)
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        // 表单重置
        reset() {
            this.form = {
                userId: undefined,
                deptId: undefined,
                userName: undefined,
                nickName: undefined,
                password: undefined,
                phonenumber: undefined,
                email: undefined,
                sex: undefined,
                status: "0",
                description: undefined,
                postIds: [],
                roleIds: [],
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.areaId = undefined;
            this.$refs.tree.setCurrentKey(null);
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.userId);
            this.idName = selection.map((item) => item.customerName);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "/system/checkdetail/export",
                {
                    ...this.queryParams,
                },
                `安检记录_${new Date().getTime()}.xlsx`
            );
        },

        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "安检记录导入";
            this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download(
                "system/checkdetail/importTemplate",
                {},
                `安检记录模板_${new Date().getTime()}.xlsx`
            );
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
                response.msg +
                "</div>",
                "导入结果",
                { dangerouslyUseHTMLString: true }
            );
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
    },
};
</script>
<style lang="scss" scoped>
.head-containers {
    width: 200px;
    overflow: auto;

    .el-tree {
        min-width: 100%;
        display: inline-block !important;
    }
}
</style>
